import React from 'react';
import { Breadcrumb, Button, Table, Input, Select, Form, Pagination, message,Radio } from 'antd';
import './userManage.less';
import $ from 'jquery';
import moment from 'moment';
import Config from '../../common/config';
import City from '../../common/city';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const config = new Config();
const Option = Select.Option;
const InputGroup = Input.Group;
const token = sessionStorage.getItem('token')
class UserManage1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            province:undefined,//省
            city:undefined,//市
            region:undefined,//区
            regions:[],//区s
            t_citys:[],//市s
            moneyBottom:'',
            moneyTop:'',
            origin:undefined,//来源
            sex:undefined,//性别
            id:undefined,//id
            phone:'',
            productlist: [],//全部商品列表
            productcount: 0,//全部商品条数
            pagesize: 10,// 每页显示的页数
            pageindex: 1,// 当前页
            moduleValue:'1',//模块默认
            selectedRows:{},
            recordInfo:[],//问诊档案
            expressInfo:[],
            selectedRowKeys:[],
        }
    }
    componentDidMount() {
        this.getUsersList();
    }
    //获取会员列表
    getUsersList() {
        let {sex, origin, id, province, city,  phone, pagesize,pageindex,region,moneyBottom,moneyTop}=this.state;
        $.ajax({
            url: `${config.JuseMember}/userManage/list`,
            type: "get",
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                origin,
                province,
                city,
                region,
                pageSize: pagesize,
                page: pageindex,
                inkey: id,//关键字
                sex: sex,//性别
                moneyBottom,
                moneyTop,
                phone,
            },
            success: res => {
                console.log('会员列表', JSON.stringify(res));
                if (res.code === 200) {
                    let usersList = res.data.rows;
                    if (usersList.length > 0) {
                        usersList.forEach((ele, i) => {
                            ele.index = i + 1;
                        });
                    }
                    this.setState({
                        productlist: usersList,
                        productcount: res.data.count,
                    });
                } else {
                    message.config({ top: 80, });
                    message.error('获取会员列表失败，请返回重新操作', 2);
                }
            }
        });
    }
    // 分页
    changePage(pageindex) {
        this.setState({
            pageindex,
            selectedRowKeys:[],
            selectedRows:{},
        }, () => {
            this.getUsersList();
        });
    }
    //搜索
    SearchProductListBtn() {
        const form = this.props.form;
        this.setState({
            moneyBottom:form.getFieldValue('moneyBottom') ? form.getFieldValue('moneyBottom') : '',
            moneyTop:form.getFieldValue('moneyTop') ? form.getFieldValue('moneyTop') : '',
            id:form.getFieldValue('id') ? form.getFieldValue('id') : '',
            phone:form.getFieldValue('phone') ? form.getFieldValue('phone') : '',
            selectedRowKeys:[],
            selectedRows:{},
        }, () => {
            this.getUsersList();
        });
    }
    //重置
    ResetBtn() {
        const form = this.props.form;
        form.resetFields();
        this.setState({
            pageindex: 1,
            region:undefined,
            province:undefined,//省
            city:undefined,//市
            moneyBottom:'',
            moneyTop:'',
            origin:undefined,//来源
            sex:undefined,//性别
            id:undefined,//id
            phone:'',
            selectedRowKeys:[],
            selectedRows:{},
        }, () => {
            this.getUsersList();
        });
    }
    //筛选
    handleValueChange(status,value){
        let data={};
        if(status===1){
            data.sex=value;
        }else if(status===2){
            data.origin=value;
        }else if(status===5){
            data.province=value;
            City.forEach(item=>{
                if(item.name===value){
                    this.setState({
                        t_citys:item.child,
                        city:undefined,
                        region:undefined,
                    })
                }
            })
        }else if(status===6){
            data.city=value;
            this.state.t_citys.forEach(item=>{
                if(item.name===value){
                    this.setState({
                        regions:item.child?item.child:[],
                        region:undefined,
                    })
                }
            })
        }else if(status===8){
            data.region=value;
        }
        this.setState(data);
    }
    //选项卡
    handleModuleChange(e){
        console.log(e.target.value);
        this.setState({
            moduleValue:e.target.value,
        });
    }
    //获取问诊档案
    getDocFile(){
        $.ajax({
            url: `${config.integratedBack2}/inte/findOneRecord`,
            type: "get",
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                userId:this.state.selectedRows.id
            },
            success: res => {
                console.log('会员列表', JSON.stringify(res));
                if (res.code === 200) {
                    let usersList = res.recordInfo;
                    if (usersList.length > 0) {
                        usersList.forEach((ele, i) => {
                            ele.index = i + 1;
                        });
                    }
                    this.setState({
                        recordInfo: usersList,
                    });
                } else {
                    message.config({ top: 80, });
                    message.error('获取列表失败，请返回重新操作', 2);
                }
            }
        });
    }
    //获取收货地址
    getExpress(){
        $.ajax({
            url: `${config.integratedBack}/mem/findByAddress`,
            type: "get",
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                userId:this.state.selectedRows.id
            },
            success: res => {
                console.log('会员列表111', JSON.stringify(res));
                if (res.code === 200) {
                    let usersList = res.list;
                    if (usersList.length > 0) {
                        usersList.forEach((ele, i) => {
                            ele.index = i + 1;
                        });
                    }
                    this.setState({
                        expressInfo: usersList,
                    });
                } else {
                    message.config({ top: 80, });
                    message.error('获取列表失败，请返回重新操作', 2);
                }
            }
        });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        let {selectedRowKeys}=this.state;
        const rowSelection = {
            type:"radio",
            selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRows:selectedRows[0],
                    selectedRowKeys,
                },()=>{
                    this.getDocFile();
                    this.getExpress();
                });
            }
        };
        const columns = [
            {
                title: '用户ID',
                dataIndex: 'id',
            },
            {
                title: '手机',
                dataIndex: 'phone',
            },
            {
                title: '会员姓名',
                dataIndex: 'realName',
            },
            {
                title: '昵称',
                dataIndex: 'name',
            },
            {
                title: '性别',
                dataIndex: 'sex',
                render: text => <span>{text == "0" ? "女" : text == "1" ? "男" : text == "2" ? "保密" : ""}</span>
            },
            {
                title: '邮箱',
                dataIndex: 'a',
            },
            {
                title: '生日',
                dataIndex: 'birthday',
            },
            {
                title: '来源',
                dataIndex: 'origin',
            },
            {
                title: '省',
                dataIndex: 't_province',
            },
            {
                title: '市',
                dataIndex: 't_city',
            },
            {
                title: '区',
                dataIndex: 't_region',
            },
            {
                title: '状态',
                dataIndex: 'userState',
                render: text => <span>{text==1?'正常':'封号'}</span>
            },
            {
                title: '注册时间',
                dataIndex: 't_regtime',
            },
            {
                title: '最后登录时间',
                dataIndex: 'loginTime',
                render: text => <span>{text?moment(new Date(parseInt(text))).format('YYYY-MM-DD HH:mm:ss'):''}</span>
            },
            {
                title: '首次消费时间',
                dataIndex: 'sal34eSthadtus',
            },
            {
                title: '最后消费时间',
                dataIndex: 't_endxftime',
            },{
                title: '消费次数',
                dataIndex: 't_xfcount',
            },
            {
                title: '消费总金额',
                dataIndex: 't_xfmoney',
            }
        ];
        const columns1 = [
            {
                title: '关系',
                dataIndex: 'relation',
            },
            {
                title: '姓名',
                dataIndex: 'name',
            },
            {
                title: '性别',
                dataIndex: 'gender',
                render:text=><span>{text==1?'男':text==2?'女':'不详'}</span>
            },
            {
                title: '出生日期',
                dataIndex: 'birthday',
            },
            {
                title: '联系手机',
                dataIndex: 'phone',
            },
        ];
        const columns2 = [
            {
                title: '收货人',
                dataIndex: 'name',
            },
            {
                title: '联系电话',
                dataIndex: 'phone',
            },
            {
                title: '省',
                dataIndex: 'area',
                render:text=><span>{text?text.split(' ')[0]:''}</span>
            },
            {
                title: '市',
                dataIndex: 'a',
                render:(text,record)=><span>{record.area?record.area.split(' ')[1]:''}</span>
            },
            {
                title: '区',
                dataIndex: 'b',
                render:(text,record)=><span>{record.area?record.area.split(' ')[2]:''}</span>
            },
            {
                title: '详细地址',
                dataIndex: 'detail',
            },
            {
                title: '邮编',
                dataIndex: 'mailcode',
            },
        ];
        let {moduleValue}=this.state;
        return (
            <Form>
                <div className='goods-label' style={{ minWidth: 1250 }}>
                    <div className='goods-label-cont clearfix'>
                        <div className='goods-label-cont-nav clearfix'>
                            <Breadcrumb separator=">">
                                <Breadcrumb.Item>运营用户管理</Breadcrumb.Item>
                                <Breadcrumb.Item><span className='separator-a'>用户管理</span></Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div className='member-content-Search clearfix'>
                            <div className='addetd'>
                                <FormItem>
                                    {
                                        getFieldDecorator('id')(
                                            <Input className='addetd-a-r' addonBefore="手机号" placeholder="请输入" />
                                        )
                                    }
                                </FormItem>
                            </div>
                            <div className='addetd addetd-a indtner'>
                                <InputGroup compact>
                                    <Input addonBefore="性 别" />
                                    <Select placeholder='请选择'  value={this.state.sex} onChange={this.handleValueChange.bind(this,1)}>
                                        <Option value="">全部</Option>
                                        <Option value="1">男</Option>
                                        <Option value="0">女</Option>
                                        <Option value="2">保密</Option>
                                    </Select>
                                </InputGroup>
                            </div>
                            {/*<div className='addetd addetd-a indtner'>*/}
                                {/*<InputGroup compact>*/}
                                    {/*<Input addonBefore="选 省" />*/}
                                    {/*<Select value={this.state.province} onChange={this.handleValueChange.bind(this,5)} placeholder='请选择'>*/}
                                        {/*<Option value="">全部</Option>*/}
                                        {/*{City.map(item=> <Option value={item.name} key={item.code}>{item.name}</Option>)}*/}
                                    {/*</Select>*/}
                                {/*</InputGroup>*/}
                            {/*</div>*/}
                            {/*<div className='addetd addetd-a indtner'>*/}
                                {/*<InputGroup compact>*/}
                                    {/*<Input addonBefore="选 市" />*/}
                                    {/*<Select value={this.state.city} onChange={this.handleValueChange.bind(this,6)} placeholder='请选择'>*/}
                                        {/*<Option value="">全部</Option>*/}
                                        {/*{this.state.t_citys.map(item=> <Option value={item.name} key={item.code}>{item.name}</Option>)}*/}
                                    {/*</Select>*/}
                                {/*</InputGroup>*/}
                            {/*</div>*/}
                            {/*<div className='addetd addetd-a indtner'>*/}
                                {/*<InputGroup compact>*/}
                                    {/*<Input addonBefore="选 区" />*/}
                                    {/*<Select value={this.state.region} onChange={this.handleValueChange.bind(this,8)} placeholder='请选择'>*/}
                                        {/*<Option value="">全部</Option>*/}
                                        {/*{this.state.regions.map(item=> <Option value={item.name} key={item.code}>{item.name}</Option>)}*/}
                                    {/*</Select>*/}
                                {/*</InputGroup>*/}
                            {/*</div>*/}
                            <Button type="primary" className='member-button' icon="search" onClick={this.SearchProductListBtn.bind(this)}>搜索</Button>
                            <Button type="primary" className='member-button' icon="reload" onClick={this.ResetBtn.bind(this)}>重置</Button>
                        </div>
                        <div className='member-content-Search clearfix'>
                            {/*<div className='addetd'>*/}
                                {/*<FormItem>*/}
                                    {/*{*/}
                                        {/*getFieldDecorator('phone')(*/}
                                            {/*<Input className='addetd-a-r' addonBefore="手机号码"  placeholder="请输入" />*/}
                                        {/*)*/}
                                    {/*}*/}
                                {/*</FormItem>*/}
                            {/*</div>*/}
                            {/*<div className='addetd' style={{marginRight:'0px'}}>*/}
                                {/*<FormItem>*/}
                                    {/*{*/}
                                        {/*getFieldDecorator('moneyBottom')(*/}
                                            {/*<Input className='addetd-a-r' addonBefore="消费金额：" placeholder="请输入" />*/}
                                        {/*)*/}
                                    {/*}*/}
                                {/*</FormItem>*/}
                            {/*</div>*/}
                            {/*<div className='addetd specialSection'>*/}
                                {/*<FormItem>*/}

                                    {/*{*/}
                                        {/*getFieldDecorator('moneyTop')(*/}
                                            {/*<Input className='addetd-a-r' addonBefore="----" placeholder="请输入" />*/}
                                        {/*)*/}
                                    {/*}*/}
                                {/*</FormItem>*/}
                            {/*</div>*/}
                            {/*<div className='addetd addetd-a indtner'>*/}
                                {/*<InputGroup compact>*/}
                                    {/*<Input addonBefore="来 源" />*/}
                                    {/*<Select value={this.state.origin} onChange={this.handleValueChange.bind(this,2)} placeholder='请选择'>*/}
                                        {/*<Option value="">全部</Option>*/}
                                    {/*</Select>*/}
                                {/*</InputGroup>*/}
                            {/*</div>*/}
                        </div>
                        <div className='clearfix'>
                            <Table rowSelection={rowSelection}
                                   scroll={{x: 1300}}
                                   rowKey="index"
                                   columns={columns}
                                   dataSource={this.state.productlist}
                                   pagination={false}
                                   bordered
                                   className='allgoods-table'
                            />
                        </div>
                        <div className='goods-label-let'>
                            <div className="floor-ppagi">
                                {
                                    this.state.productcount == 0 ?
                                        <p className="floor-ppagip">
                                            共{this.state.productcount}条记录
                                        </p> :
                                        <p className="floor-ppagip">
                                            当前显示
                                            {this.state.pagesize * (this.state.pageindex - 1) + 1}—
                                            {this.state.pagesize * this.state.pageindex < this.state.productcount ? this.state.pagesize * this.state.pageindex : this.state.productcount}条记录，
                                            共{this.state.productcount}条记录
                                        </p>
                                }
                                <Pagination current={this.state.pageindex} total={this.state.productcount || 1} defaultPageSize={this.state.pagesize} onChange={this.changePage.bind(this)} />
                            </div>
                        </div>
                        <div style={{marginBottom:'30px'}}>
                            <RadioGroup defaultValue="1" onChange={this.handleModuleChange.bind(this)}>
                                <RadioButton value="1">详细信息</RadioButton>
                                <RadioButton value="2">收货地址</RadioButton>
                                <RadioButton value="3">问诊档案</RadioButton>
                                <RadioButton value="4">问诊记录</RadioButton>
                                <RadioButton value="5">医馆消费</RadioButton>
                            </RadioGroup>
                        </div>
                        {this.state.selectedRowKeys.length?(moduleValue==1?
                            <div>1</div>: moduleValue==2?
                                <div>
                                    <Table
                                        rowKey="index"
                                        columns={columns2}
                                        dataSource={this.state.expressInfo}
                                        pagination={false}
                                        bordered
                                        className='allgoods-table'
                                    />
                                </div>: moduleValue==3?
                                    <div >
                                        <Table
                                               rowKey="index"
                                               columns={columns1}
                                               dataSource={this.state.recordInfo}
                                               pagination={false}
                                               bordered
                                               className='allgoods-table'
                                        />
                                    </div>: moduleValue==4?
                                        <div>4</div>:
                                        <div>5</div>):''}
                    </div>
                </div>
            </Form>
        )
    }
}

const BusinessBackUserManage = Form.create()(UserManage1);
export default BusinessBackUserManage;